<template>
  <el-form
    v-if="form.type==='bpmn:Task'"
    class="panel"
    ref="form"
    id="form"
    label-width="auto"
    size="mini"
  >
    <el-divider>
      <el-tag>{{form.type}}</el-tag>
    </el-divider>
    <el-form-item label="name">
      <el-input v-model="form.name" @input="returnBack" readonly="readonly"></el-input>
    </el-form-item>
    <el-form-item label="inputKeys">
      <el-tag
        :key="tag"
        v-for="tag in form.inputKeys"
        :disable-transitions="false"
        effect="plain"
      >{{tag}}</el-tag>
    </el-form-item>
    <el-form-item label="outputKeys">
      <el-tag
        :key="tag"
        v-for="tag in form.outputKeys"
        :disable-transitions="false"
        effect="plain"
      >{{tag}}</el-tag>
    </el-form-item>
    <el-form-item label="inputTemplate">
      <el-input v-model="form.inputTemplate" @input="returnBack"></el-input>
    </el-form-item>
    <el-form-item label="description">
      <el-input v-model="form.description" @input="returnBack"></el-input>
    </el-form-item>
    <el-form-item label="retryCount">
      <el-input-number v-model="form.retryCount" @input="returnBack"></el-input-number>
    </el-form-item>
    <el-form-item label="retryLogic">
      <el-radio-group v-model="form.retryLogic" @input="returnBack">
        <el-radio label="FIXED">FIXED</el-radio>
        <el-radio label="EXPONENTIAL_BACKOFF">EXPONENTIAL_BACKOFF</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="retryDelaySeconds">
      <el-input v-model="form.retryDelaySeconds" @input="returnBack" type="number"></el-input>
    </el-form-item>
    <el-form-item label="timeoutPolicy">
      <el-radio-group v-model="form.timeoutPolicy" @input="returnBack">
        <el-radio label="RETRY">RETRY</el-radio>
        <el-radio label="TIME_OUT_WF">TIME_OUT_WF</el-radio>
        <el-radio label="ALERT_ONLY">ALERT_ONLY</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="timeoutSeconds">
      <el-input v-model="form.timeoutSeconds" @input="returnBack" type="number"></el-input>
    </el-form-item>
    <el-form-item label="responseTimeoutSeconds">
      <el-input v-model="form.responseTimeoutSeconds" @input="returnBack" type="number"></el-input>
    </el-form-item>
    <el-form-item label="concurrentExecLimit">
      <el-input v-model="form.concurrentExecLimit" @input="returnBack"></el-input>
    </el-form-item>
    <el-form-item label="rateLimitFrequencyInSeconds">
      <el-input v-model="form.rateLimitFrequencyInSeconds" @input="returnBack"></el-input>
    </el-form-item>
  </el-form>
  <el-form
    v-else-if="form.type==='bpmn:StartEvent'"
    class="panel"
    ref="form"
    id="form"
    label-width="auto"
    size="mini"
  >
    <el-divider>
      <el-tag>{{form.type}}</el-tag>
    </el-divider>
    <el-form-item label="input">
      <el-tag
        :key="tag"
        v-for="tag in form.outputKeys"
        closable
        :disable-transitions="false"
        @close="handleClose(tag,'outputKeys')"
        effect="plain"
      >{{tag}}</el-tag>
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm('outputKeys')"
        @blur="handleInputConfirm('outputKeys')"
      ></el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
    </el-form-item>
  </el-form>
  <el-form
    v-else-if="form.type==='bpmn:EndEvent'"
    class="panel"
    ref="form"
    id="form"
    label-width="auto"
    size="mini"
  >
    <el-divider>
      <el-tag>{{form.type}}</el-tag>
    </el-divider>
    <el-form-item label="output">
      <el-tag
        :key="tag"
        v-for="tag in form.inputKeys"
        closable
        :disable-transitions="false"
        @close="handleClose(tag,'inputKeys')"
        effect="plain"
      >{{tag}}</el-tag>
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm('inputKeys')"
        @blur="handleInputConfirm('inputKeys')"
      ></el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
    </el-form-item>
  </el-form>
  <el-form
    v-else-if="form.type==='bpmn:SequenceFlow'"
    class="panel"
    ref="form"
    id="form"
    label-width="auto"
    size="mini"
  >
    <el-divider>
      <el-tag>{{form.type}}</el-tag>
    </el-divider>
    <el-form-item v-for="(_,k) in form.maps" :key="k" :label="k">
      <el-select v-model="form.maps[k][0]"  placeholder="请将输入与输出对应">
        <el-option v-for="(v,index) in form.values" :key="index" :label="v" :value="v" />
      </el-select>
      <el-input v-model="form.maps[k][1]" placeholder="对应输入的子节点(请以_隔开)" />
    </el-form-item>
  </el-form>
  <el-form
    v-else-if="form.type==='Process'"
    class="panel"
    ref="form"
    id="form"
    label-width="auto"
    size="mini"
  >
    <el-divider>
      <el-tag>{{form.type}}</el-tag>
    </el-divider>
    <el-form-item label="name">
      <el-input v-model="form.name" @input="returnBack"></el-input>
    </el-form-item>
    <el-form-item label="description">
      <el-input v-model="form.description" @input="returnBack"></el-input>
    </el-form-item>
    <el-form-item label="version">
      <el-input v-model="form.version" @input="returnBack" type="number"></el-input>
    </el-form-item>
    <el-form-item label="tasks">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item
          v-for="(task,index) in form.tasks"
          :key="index"
          :title="task.name"
          :name="index"
        >
          <div v-for="(value,key) in task" :key="key">{{key}}: {{value}} </div>
        </el-collapse-item>
      </el-collapse>
    </el-form-item>
    <el-form-item label="inputParameters">
      <el-tag
        :key="tag"
        v-for="tag in form.inputParameters"
        :disable-transitions="false"
        effect="plain"
      >{{tag}}</el-tag>
    </el-form-item>
    <el-form-item label="outputParameters">
      <div v-for="(value,key) in form.outputParameters" :key="key">{{key}}: {{value}}</div>
    </el-form-item>
    <el-form-item label="failureWorkflow">
      <el-input v-model="form.failureWorkflow" @input="returnBack"></el-input>
    </el-form-item>
    <el-form-item label="restartable">
      <el-switch
        style="display: block"
        v-model="form.restartable"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="Enabled"
        inactive-text="Disabled"
        @input="returnBack"
      ></el-switch>
    </el-form-item>
    <el-form-item label="workflowStatusListener">
      <el-switch
        style="display: block"
        v-model="form.workflowStatusListenerEnabled"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="Enabled"
        inactive-text="Disabled"
        @input="returnBack"
      ></el-switch>
    </el-form-item>
    <el-form-item label="schemaVersion">
      <el-tooltip
        class="item"
        effect="dark"
        content="schemaVersion can only be 2"
        placement="bottom"
      >
        <el-input v-model="form.schemaVersion" readonly="readonly" :disabled="true"></el-input>
      </el-tooltip>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "PropertiesView",
  data() {
    return {
      inputVisible: false,
      inputValue: "",
      activeNames: [],
      form: this.form_id
    };
  },
  props: ["form_id"],
  // model: {
  //   prop: "form"
  // },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    onSubmit() {
      console.log("submit!");
    },
    updated() {
      console.log(this.form);
    },
    returnBack() {
      console.log("return Back", this.form);
      // this.$emit("input", event.target.value);
      // this.$emit("ListenForm", this.form);
    },
    handleClose(tag, keys) {
      this.form[keys].splice(this.form[keys].indexOf(tag), 1);
      this.$emit("keysChanged", keys);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm(keys) {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.form[keys].push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
      this.$emit("keysChanged", keys);
    }
  },
  watch: {
    form(val) {
      console.log("update!");
      this.$emit("update:form_id", this.form);
    }
  }
};
</script>
<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>